<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态库存管理</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="../../js/bootstrap-table.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap-table-zh-CN.min.js"></script>
    <script>
        $(function () {
            $("#tab").bootstrapTable({
                method: "get",
                contentType: "application/json;charset=utf-8",
                url: "/scell/queryScellAll",
                striped: true,
                pageNumber: 1,
                pagination: true,
                sidePagination: 'server',
                pageSize: 5,
                pageList: [3, 5, 6, 10],
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNumber: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,
                    }
                },
                columns: [
                    {title: 'I级产品分类', field: 'payId', align: 'center', formatter: function (value, row, index) {
                            return row.firstKindId+"/"+row.firstKindName;
                        }},
                    {title: 'II产品分类', field: 'reason', align: 'center', formatter: function (value, row, index) {
                        return row.secondKindId+"/"+row.secondKindName;
                        }
                    },
                    {title: 'III级发类',field: 'reasonexact',align: 'center' ,formatter: function (value, row, index) {
                            return row.thirdKindId+"/"+row.thirdKindName;
                        }},
                    {title: '产品编号',field: 'productId',align: 'center'},
                    {title: '产品名称', field: 'productName', align: 'center'},
                    {title: '库存数量', field: 'amount', align: 'center',formatter: function (value, row, index) {
                                if(row.amount<row.minAmount){
                                    return "<a  data-toggle='modal' data-target='#myModal2'  onclick='sl("+JSON.stringify(row)+")' style='color: #ffc028;text-decoration:underline'>"+value+"</a>"
                                }else if(row.amount>row.maxAmount){
                                    return "<a data-toggle='modal' data-target='#myModal2' onclick='sl("+JSON.stringify(row)+")' style='color: red;text-decoration:underline'>"+value+"</a>"
                                }else{
                                    return "<a style='text-decoration:underline' data-toggle='modal' data-target='#myModal2' onclick='sl("+JSON.stringify(row)+")' >"+value+"</a>"
                                }
                            }
                    },
                    {title: '安全库存上限',field: 'maxAmount',align: 'center',formatter: function (value, row, index) {
                            if(row.amount<row.minAmount){
                                return "<span style=\"color: #ffc028\">"+value+"</span>"
                            }else if(row.amount>row.maxAmount){
                                return "<span style=\"color: red\">"+value+"</span>"
                            }else{
                                return "<span >"+value+"</span>"
                            }
                        }

                    },
                    {title: '安全库存下限', field: 'minAmount', align: 'center',formatter: function (value, row, index) {
                            if(row.amount<row.minAmount){
                                return "<span style=\"color: #ffc028\">"+value+"</span>"
                            }else if(row.amount>row.maxAmount){
                                return "<span style=\"color: red\">"+value+"</span>"
                            }else{
                                return "<span>"+value+"</span>"
                            }
                        }},
                ]
            })
            f();
        })


        function f() {
            $.ajax({
                type:'post',
                url:'/scell/queryCount',
                success:function (result) {
                    $("#count").text(result.sumcount);
                    $("#max").text(result.maxcount);
                    $("#min").text(result.mincount);
                }
            })
        }


        function sl(data) {
                $("#product_id").val(data.productId);
                $("#product_name").val(data.productName);
            var a=data.firstKindId+"-"+data.secondKindId+"-"+data.thirdKindId;
            var b=data.firstKindName+"-"+data.secondKindName+"-"+data.thirdKindName;
            $("#tabr").html("");
            $("#tabc").html("");
            $.ajax({
                type:'post',
                url:'/sgather/queryGatherDetailsByproductId',
                data:"productid="+data.productId,
                success:function (result) {
                    $.each(result,function (index,value) {
                        var re='';
                        if (value.reason == "r001-1") {
                            re= "生产入库";
                        } else if (value.reason == "r001-2") {
                            re= "库存初始";
                        } else if (value.reason == "r001-3") {
                            re= "赠送";
                        } else if (value.reason == "r001-4") {
                            re= "内部归还"
                        } else {
                            re= "其他";
                        }
                            $("#tabr").append("<tr>" +
                                "<td>"+value.id+"</td>" +
                                "<td style='width: 100px'>"+re+"</td>" +
                                "<td>"+a+"</td>" +
                                "<td>"+b+"</td>" +
                                "<td>"+value.gathered_amount+"</td>" +
                                "</tr>")
                    })
                }
            })
            $.ajax({
                type:'post',
                url:'/spay/queryspayDetailsByproductId',
                data:"productid="+data.productId,
                success:function (result) {
                    $.each(result,function (index,value) {
                        var ra='';
                        if (value.reason == "c002-1") {
                            ra ="生产领料";
                        } else if (value.reason == "c002-2") {
                            ra ="赠送 ";
                        } else if (value.reason == "c002-3") {
                            ra ="内部借领";
                        } else if (value.reason == "c002-4") {
                            ra= "其他借领"
                        } else {
                            ra= "其他";
                        }
                        $("#tabc").append("<tr>" +
                            "<td>"+value.id+"</td>" +
                            "<td style='width: 100px'>"+ra+"</td>" +
                            "<td>"+a+"</td>" +
                            "<td>"+b+"</td>" +
                            "<td>-"+value.paid_amount+"</td>" +
                            "</tr>")
                    })
                }
            })


        }
    </script>
</head>
<body>
<div>
   <span >当前库存总数：<simple id="count"></simple></span> <span style="color: red">当前库存上限报警产品种类数：<simple id="max"></simple></span>
    <span style="color: #ffc028">库存下报警产品种类数：<simple id="min"></simple></span>
</div>
<hr>
<div class="form-inline" style="display: none;">
    产品编号：<input  id="pId" class="input-inline">
</div>
<table id="tab" class="table">

</table>

<div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title" style="margin-left: 43%;">库存明细单</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">

                <div class="form-group row">

                    <label for="product_id" class="col-sm-2 col-form-label">产品编号</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="product_id" readonly>
                    </div>
                    <div class="col-2"></div>
                    <label for="product_name" class="col-sm-2 col-form-label">产品名称</label>
                    <div class="col-sm-3">
                        <input type="text   " class="form-control" id="product_name" readonly>
                    </div>
                </div>

                <div>
                    <span>入库</span>
                    <table  class="table table-striped" border="1">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>原因</td>
                                <td>存储地址编号</td>
                                <td>存储地址名称</td>
                                <td>操作数量</td>
                            </tr>
                        </thead>
                        <tbody id="tabr">

                        </tbody>
                    </table>
                </div>

                <div>
                    <span>出库</span>
                    <table  class="table table-striped" border="1">
                        <thead>
                        <tr>
                            <td>序号</td>
                            <td>原因</td>
                            <td>存储地址编号</td>
                            <td>存储地址名称</td>
                            <td>操作数量</td>
                        </tr>
                        </thead>
                        <tbody id="tabc">

                        </tbody>
                    </table>
                </div>


            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>

</body>
</html>